<template>
    <div class="container yuan-container  production-index">
        <a-card title="生产计划">
            <div class="filter-panel">
                <div class="filter-list">
                    <a-input-search allowClear v-model="keywords" placeholder="品名/编号" @search="resetList"></a-input-search>
                </div>
                <div class="filter-list">
                    <span>选择日期：</span>
                    <a-range-picker @change="dateChange" :placeholder="['开始日期','结束日期']" :format="['YYYY-MM-DD','YYYY-MM-DD']" />
                </div>
            </div>
            <div class="page-top-label">
                <div class="pt-list">
                    <div class="pt-left">
                        <div class="pt-title">计划总量</div>
                        <div class="pt-info">{{topCount.totalPlan}}</div>
                    </div>
                    <img class="pt-right" :src="require('@/assets/img/计划总量.png')" alt="">
                </div>
                <div class="pt-list">
                    <div class="pt-left">
                        <div class="pt-title">已分解计划</div>
                        <div class="pt-info">{{topCount.decomposeNum}}</div>
                    </div>
                    <img class="pt-right" :src="require('@/assets/img/已分解计划.png')" alt="">
                </div>
                <div class="pt-list">
                    <div class="pt-left">
                        <div class="pt-title">已完成计划</div>
                        <div class="pt-info">{{topCount.finishNum}}</div>
                    </div>
                    <img class="pt-right" :src="require('@/assets/img/已完成计划.png')" alt="">
                </div>
                <div class="pt-list">
                    <div class="pt-left">
                        <div class="pt-title">逾期计划</div>
                        <div class="pt-info">{{topCount.overduePlan}}</div>
                    </div>
                    <img class="pt-right" :src="require('@/assets/img/逾期计划.png')" alt="">
                </div>
            </div>
            <div class="table">
                <a-table bordered :loading="tableOption.loading" :rowKey="(item,i)=>i" :columns="tableOption.columns"
                    :data-source="tableOption.dataSource" :pagination="tableOption.pagination">
                    <template slot='action' slot-scope="text, record, index">
                        <div>
                            <a-popconfirm okText="确定" cancelText="取消" title="是否暂停计划" v-if="record.prodState==='2' && record.prodState!=='5'" @confirm="stop(record,3)">
                                <a-button style="margin-right: 10px" type="warning">暂停计划</a-button>
                            </a-popconfirm>
                            <a-popconfirm okText="确定" cancelText="取消" title="是否终止计划" v-if="record.prodState!=='4' && record.prodState!=='5'" @confirm="stop(record,4)">
                                <a-button style="margin-right: 10px" type="danger">终止计划</a-button>
                            </a-popconfirm>
                            <a-popconfirm okText="确定" cancelText="取消" title="是否暂停计划" v-if="record.prodState==='4' || record.prodState==='3'" @confirm="stop(record,2)">
                                <a-button style="margin-right: 10px" type="primary">恢复</a-button>
                            </a-popconfirm>
                            <a-popconfirm okText="确定" cancelText="取消" title="是否下发生产计划" @confirm="send(record)"
                                v-if="record.issuanceState==='1'">
                                <a-button style="margin-right: 10px" type="warning">下发</a-button>
                            </a-popconfirm>

                            <a-button style="margin-right: 10px" type="danger" @click="bindBatch(record)"
                                v-if="record.issuanceState==='2'">
                                绑定批号
                            </a-button>

                            <!-- <a-popconfirm style="margin-right: 10px" okText="确定" cancelText="取消" title="确定删除吗？" @confirm="remove(record)">
                                <a-button type="danger">删除</a-button>
                            </a-popconfirm> -->

                            <a-button type="primary" v-if="record.issuanceState==='3'" @click="detail(record)">查看</a-button>
                            <a-button type="primary" v-else @click="unbindDetail(record)">查看</a-button>

                        </div>
                    </template>
                </a-table>
            </div>
        </a-card>

        <!-- <add-or-edit :editId="editId" :visible="modalVisible" @closeModal="onClose">
        </add-or-edit> -->

        <PlanVue :visible="submitAuditVisible" @closeModal="() => submitAuditVisible = false" :parentInfo="submitAuditInfo"
            @resetList="resetList" />
        <DetailVue :visible="detailVisible" @closeModal="() => detailVisible = false" :id="editId" />
        <UnbindDetailVue :visible="unbindDetailVisible" @closeModal="() => unbindDetailVisible = false" :id="editId" />
        <BindNumVue :visible="bindBatchVisible" @closeModal="() => bindBatchVisible = false" :id="editId" @resetList="getTableData"  />
    </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import nextApi from "@/api/nextApi";
import PlanVue from "@/views/smartWarningView/components/planV2.vue";
import { h } from "vue";
import warningApi from "@/api/warningApi";
import { format, toDecimalNoZero } from "@/utils";
import DetailVue from "./components/detail.vue";
import UnbindDetailVue from "./components/unbindDetail.vue";
import BindNumVue from "./components/bindNum.vue";
@Component({
    name: "productionPlan",
    components: {
        PlanVue,
        DetailVue,
        UnbindDetailVue,
        BindNumVue,
    },
})
export default class extends Vue {
    modalVisible = false;
    keywords = "";
    tableOption: any = {
        loading: false,
        dataSource: [],
        columns: [
            {
                title: "生产任务编号",
                dataIndex: "planSerial",
                key: "planSerial",
                align: "center",
            },
            {
                title: "品名",
                dataIndex: "materialName",
                key: "materialName",
                align: "center",
            },
            {
                title: "标准",
                dataIndex: "standard",
                key: "standard",
                align: "center",

            },
            {
                title: "颗粒投入量（kg）",
                dataIndex: "inputNum",
                key: "inputNum",
                align: "center",
                customRender: (text: string, record: any, index: number) => toDecimalNoZero(record.inputNum),
            },
            // {
            //     title: "可供销售天数",
            //     dataIndex: "availableSellDay",
            //     key: "availableSellDay",
            //     align: "center",
            // },
            {
                title: "任务状态",
                dataIndex: "issuanceState",
                key: "issuanceState",
                align: "center",
                customRender: (text: string, record: any, index: number) => {
                    const data = {
                        "1": { title: "待下发", class: "status-words" },
                        "2": { title: "待绑定", class: "status-words c-primary" },
                        "3": { title: "已绑定", class: "status-words c-success" },
                    };
                    const dataOne = data[record.issuanceState] || {};
                    const dom = h("div", { class: dataOne.class }, dataOne.title);
                    return dom;
                },
            },
            {
                title: "计划状态",
                dataIndex: "prodState",
                key: "prodState",
                align: "center",
                customRender: (text: string, record: any, index: number) => {
                    const data = {
                        "1": { title: "未生产", class: "status-words" },
                        "2": { title: "生产中", class: "status-words c-success" },
                        "3": { title: "生产暂停", class: "status-words c-warning" },
                        "4": { title: "生产作废", class:"status-words"},
                        "5": { title: "生产完成", class:"status-words c-primary"}
                    };
                    const dataOne = data[record.prodState] || {};
                    const dom = h("div", { class: dataOne.class }, dataOne.title);
                    return dom;
                },
            },
            // {
                // title: "计划进度",
                // dataIndex: "planProgress",
                // key: "planProgress",
                // align: "center",
                // customRender: (text: string, record: any, index: number) => {
                //     const data = {
                //         1: { title: "待排产", class: "status-words c-warning" },
                //         2: { title: "已排产", class: "status-words c-primary" },
                //         3: { title: "已关闭", class: "status-words " },
                //     };
                //     const dataOne = data[record.prodScheduling] || {};
                //     const dom = h("div", { class: dataOne.class }, dataOne.title);
                //     return dom;
                // },
            // },

            {
                title: "预计完成时间",
                dataIndex: "finishTime",
                key: "finishTime",
                align: "center",
                customRender: (text: string, record: any, index: number) => {
                    return format(record.finishTime, "yyyy-MM-dd");
                },
            },
            {
                align: "center",
                dataIndex: "action",
                key: "action",
                title: "操作",
                scopedSlots: { customRender: "action" },
            },
        ],
        pagination: {
            pageSize: 10,
            current: 1,
            total: 0,
            showTotal: (total: number | string) => `共${total}条`,
            onChange: this.pageChange,
        },
    };
    editId = "";
    mounted() {
        this.getTableData();
    }
    resetList() {
        this.tableOption.pagination.current = 1;
        this.getTableData();
    }
    topCount = {};
    async getTopCount() {
        this.tableOption.loading = true;
        try {
            const res = await warningApi.getPlanInfo();
            this.topCount = res.data || {};
        } finally {
            this.tableOption.loading = false;
        }
    }
    async getTableData() {
        await this.getTopCount();
        this.tableOption.loading = true;
        let params = {
            page: this.tableOption.pagination.current,
            pageSize: this.tableOption.pagination.pageSize,
            materialName: this.keywords,
            ...this.pageParams,
        };
        try {
            const res = await warningApi.getProcessPlanList(params);
            this.tableOption.pagination.total = res.data?.total || 0;
            this.tableOption.dataSource = res.data?.records || [];
        } finally {
            this.tableOption.loading = false;
        }
    }
    //新增
    add() {
        this.modalVisible = true;
    }
    //下发
    async send(record: any) {
        this.tableOption.loading = true;
        try {
            const res = await warningApi.getIssuancePlan({ id: record.id });
            this.$message.success(res.msg);
            await this.getTableData();
        } finally {
            this.tableOption.loading = false;
        }
    }
    //编辑
    edit(record: any) {
        this.editId = record.templateId;
        this.modalVisible = true;
    }
    //详情
    detailVisible = false;
    detail(record: any) {
        this.editId = record.id;
        this.detailVisible = true;
    }
    //暂停/终止
    async stop(record: any,prodState) {
        try {
            const res = await warningApi.getPlanStop({ id: record.id,prodState });
            this.$message.success(res.msg);
            await this.getTableData();
        } finally {
            this.tableOption.loading = false;
        }
    }
    unbindDetailVisible = false;
    unbindDetail(record: any) {
        this.editId = record.id;
        this.unbindDetailVisible = true;
    }

    bindBatchVisible = false;
    bindBatch(record: any) {
        this.editId = record.id;
        this.bindBatchVisible = true;
    }

    submitAuditVisible = false;
    submitAuditInfo = {};
    submitAudit(record: any) {
        this.submitAuditInfo = record;
        this.submitAuditVisible = true;
    }
    //删除
    async remove(record: any) {
        // const res = await nextApi.removeData(record.templateId);
        // if (res.code == 200) {
        //     this.$message.success(res.msg);
        //     this.getTableData();
        // }
    }

    pageChange(page: number, pageSize: number) {
        this.tableOption.pagination.pageSize = pageSize;
        this.tableOption.pagination.current = page;
        this.getTableData();
    }
    onClose() {
        this.modalVisible = false;
        this.getTableData();
    }

    async decompose(item) {
        this.tableOption.loading = true;
        try {
            const res = await warningApi.getDecomposePlan({ id: item.id });
            this.$message.success(res.msg);
            await this.getTableData();
        } finally {
            this.tableOption.loading = false;
        }
    }
    pageParams = {
        startTime: "",
        endTime: "",
    };
    dateChange(e: any[]) {
        const arr = e.map((item) => item.format("YYYY-MM-DD"));
        this.pageParams.startTime = arr[0];
        this.pageParams.endTime = arr[1];
        this.resetList();
    }
}
</script>
<style scoped lang="scss">
.container {
    padding: 20px;
    .tool-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        span {
            padding-left: 10px;
            font-size: 18px;
        }
        button {
            margin-left: 10px;
        }
    }
    .table {
        margin-top: 20px;
    }
}
</style>
